<template>
  <div>
    <Header></Header>
<!--    <div class="chat-container">
      <div class="chat-header">
        <h3>AI ChatBot</h3>
      </div>
      <div class="chat-box" ref="chatBox">
        &lt;!&ndash; 聊天内容将在这里显示 &ndash;&gt;
        <div class="message" v-for="(msg, index) in messages" :key="index" :class="{ 'my-message': msg.isMine }">
          <p>{{ msg.text }}</p>
        </div>
      </div>
      <div class="chat-input">
        <input type="text" v-model="inputText" @keyup.enter="sendMessage" placeholder="Type a message...">
        <button @click="sendMessage">Send</button>
      </div>
    </div>-->
    <el-row>
      <el-col :span="20" :offset="2">
        <div class="chat-container">
          <div class="chat-header">
            <h3>AI ChatBot</h3>
          </div>
          <div class="chat-box" ref="chatBox">
            <!-- 聊天内容将在这里显示 -->
            <div class="message" v-for="(msg, index) in messages" :key="index" :class="{ 'my-message': msg.isMine }">
              <p v-if="msg.isMine">{{ msg.text }}</p>
              <mavon-editor
                v-else
                :toolbarsFlag="false"
                defaultOpen='preview'
                :subfield="false"
                v-model="msg.text"/>
            </div>
          </div>
          <el-row>
            <el-col
            style="background-color: white">
              <el-input
                style="width: 80%"
                :rows="4"
                resize="none"
                type = "textarea"
                suffix-icon="el-icon-delete"
                placeholder="请输入内容"
                clearable
                v-model="inputText">
              </el-input>
              <el-divider
                direction="vertical"></el-divider>
              <el-button
                type="primary"
                icon="el-icon-delete" @click="clearText()"></el-button>
              <el-button
                type="primary"
                icon="el-icon-delete"></el-button>
              <el-button
                type="primary"
                icon="el-icon-upload2" @click="commitText()"></el-button>
            </el-col>
          </el-row>
<!--          <el-input
            :rows="4"
            resize="none"
            type = "textarea"
            suffix-icon="el-icon-delete"
            placeholder="请输入内容"
            clearable
            v-model="inputText">
          </el-input>-->

        </div>
      </el-col>
      <el-col>

      </el-col>
    </el-row>

  </div>

</template>

<script>
import Header from "../common/header/index.vue";
import MdEditor from '@/components/v-md-editor/index.vue';
export default {
  components: {
    Header,
    MdEditor
  },
  data() {
    return {
      isAiAnswe:true,
      inputText: '',
      messages: [
        // 初始消息数组
      ]
    };
  },
  methods: {

    clearText(){
      this.inputText=''
    },
    commitText(){
      this.sendMessage()
    },
    sendMessage() {
      if (this.inputText.trim()) {
        // 假设发送消息到服务器
        // 然后添加到消息数组中
        this.messages.push({
          text: this.inputText,
          isMine: true
        });
        this.$http({
          url: this.$http.adornUrl('/AI'),
          method: 'post',
          data: this.$http.adornData({
            'inputText': this.inputText,
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.isAiAnswe=false
            this.inputText=data.data[0]
            this.messages.push({
              text: `AI says: <br> ${this.inputText}`,
              isMine: false
            });
            this.inputText=''
            // this.blog = data.info.blogText
          } else {

          }

        })

        this.inputText = ''; // 清空输入框
        this.$nextTick(() => {
          this.$refs.chatBox.scrollTop = this.$refs.chatBox.scrollHeight; // 自动滚动到底部
        });
      }
    }
  }
};
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 90vh;
}
.chat-header {
  background: #f5f5f5;
  padding: 10px;
}
.chat-box {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #e5e5e5;
}
.message {
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}
.my-message {
  margin-left: 50%; /* 居右显示 */
}
.chat-input {
  background: #f5f5f5;
  padding: 10px;
  display: flex;
}
.chat-input input {
  flex: 1;
  margin-right: 10px;
}

.el-divider--vertical {
  height: 6em;
  margin-left: -5px;
}
</style>
